@import 'wildcard/src/global-styles/breakpoints';

.hidden-changeset-apply-preview-node {
    &__list-cell {
        @media (--sm-breakpoint-up) {
            padding: 0.5rem;
        }
        @media (--xs-breakpoint-down) {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
        }
    }
    &__current-state,
    &__action,
    &__information {
        @media (--xs-breakpoint-down) {
            // Make it full width in the current row.
            grid-column: 1 / -1;
        }
    }
    &__current-state {
        color: var(--icon-color);
        @media (--sm-breakpoint-up) {
            background-color: var(--oc-blue-0);
            :global(.theme-redesign) & {
                background-color: var(--body-bg);
            }
        }
    }
}

:global(.theme-dark) {
    .hidden-changeset-apply-preview-node {
        &__current-state {
            color: var(--body-color);
            @media (--sm-breakpoint-up) {
                background-color: var(--oc-gray-7);
                :global(.theme-redesign) & {
                    background-color: var(--body-bg);
                }
            }
        }
    }
}
